<template>
  <el-form
    :inline="true"
    :class="['search-component', { 'is-expanded': isExpanded }]"
  >
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item, index) in searchOptions" :key="index">
        <el-form-item>
          <template v-if="item.type === 'input'">
            <div class="input">
              <p class="label">{{ item.label }}</p>
              <p class="ys">
                <el-input
                  v-model="params[item.prop]"
                  :placeholder="item.placeholder"
                />
              </p>
            </div>
          </template>

          <template v-if="item.type === 'input-range'">
            <div class="input">
              <p class="label">{{ item.label }}</p>
              <p class="ys">
                <el-input
                  v-model="params[item.prop]"
                  :placeholder="item.placeholder"
                />
              </p>
              <p>- ￥</p>
              <p class="ys">
                <el-input
                  v-model="params[item.prop1]"
                  :placeholder="item.placeholder"
                />
              </p>
            </div>
          </template>

          <template v-if="item.type === 'select'">
            <div class="input">
              <p class="label">{{ item.label }}</p>
              <p class="ys">
                <el-select
                  v-model="params[item.prop]"
                  :placeholder="item.placeholder"
                >
                  <el-option
                    v-for="(option, idx) in item.options"
                    :key="idx"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </p>
            </div>
          </template>

          <template v-if="item.type === 'cascader'">
            <div class="input">
              <p class="label">{{ item.label }}</p>
              <p class="ys">
                <el-cascader
                  v-model="params[item.prop]"
                  :options="item.options"
                />
              </p>
            </div>
          </template>

          <template v-if="item.type === 'date-range'">
            <div class="input">
              <p class="label">{{ item.label }}</p>
              <p class="ys">
                <el-date-picker
                  v-model="params[item.prop]"
                  type="datetimerange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </p>
            </div>
          </template>
        </el-form-item>
      </el-col>
      
      <div v-if="isAlign">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </el-row>
    
    <el-button v-if="!isAlign" type="primary" @click="handleSearch">查询</el-button>
    <el-button v-if="!isAlign" @click="handleReset">重置</el-button>
    <span style="margin-left: 50px" v-if="!closeDown">
      <el-button type="text">导出案件</el-button>
      <el-button type="text">导出记录</el-button>
    </span>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from "vue";
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  searchOptions: {
    type: Array,
    default: () => [],
  },
  params: {
    type: Object,
    default: {},
  },
  closeDown:{
    type: Boolean
  },
  isAlign:{
    type: Boolean
  }
});

  console.log(props.searchOptions)

const emit = defineEmits(["search", "reset"]);
const handleSearch = () => {
  emit("search", { ...props.params });
};

const handleReset = () => {
  // 重置搜索表单到初始状态
  for (const key in props.params) {
    props.params[key] = "";
  }
  emit("reset");
};
</script>

<style lang="scss" scoped>
.search-component {
  margin-bottom: 20px;
}
.search-component.is-expanded {
  /* 展开搜索条件的样式 */
}
.input {
  width: 100%;
  display: flex;
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  .ys {
    flex: 1;
  }
}
.el-form--inline .el-form-item {
  width: 100%;
}
::v-deep .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep .el-select__wrapper {
  box-shadow: none !important;
  height: 36px;
  line-height: 36px;
}
::v-deep .el-date-editor {
  width: 96%;
}
</style>